<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>用户列表 - BsAdmin后台模板 - 经典版演示</title>

</head>
<body>
<div id="app" class="d-flex">
    <jsp:include page="/left.jsp"></jsp:include>
    <main>
        <header>
            <a href="http://www.qadmin.net" target="_blank">网站首页</a>
            <div class="dropdown float-right">
                <button class="btn  btn-sm  dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown"
                        aria-haspopup="true" aria-expanded="false">
                    <svg width="20" height="1em" viewBox="0 0 16 16" class="bi bi-emoji-smile-fill rounded-circle"
                         fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                        <path fill-rule="evenodd"
                              d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zM7 6.5C7 7.328 6.552 8 6 8s-1-.672-1-1.5S5.448 5 6 5s1 .672 1 1.5zM4.285 9.567a.5.5 0 0 1 .683.183A3.498 3.498 0 0 0 8 11.5a3.498 3.498 0 0 0 3.032-1.75.5.5 0 1 1 .866.5A4.498 4.498 0 0 1 8 12.5a4.498 4.498 0 0 1-3.898-2.25.5.5 0 0 1 .183-.683zM10 8c.552 0 1-.672 1-1.5S10.552 5 10 5s-1 .672-1 1.5S9.448 8 10 8z"/>
                    </svg>
                    <!--可以使用图片,大小20,class='rounded-circle'-->
                    BsAdmin
                </button>
                <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenu2">
                    <a class="dropdown-item" href="repwd.html">修改密码</a>
                    <a class="dropdown-item" href="out.html">退出登录</a>
                </div>
            </div>
        </header>
        <div id="body">
            <main>
                <div class="main">
                    <div class="search">
                        <form class="form-inline float-left" action="" method="get">
                            <div class="form-group">
                                <input type="text" id="key" name="key" value="" class="form-control"
                                       placeholder="手机号/昵称/UID">
                            </div>
                            <button type="button" id="searchBtn" class="btn btn-primary"><i class="iconfont"></i>搜索
                            </button>
                        </form>
                        <a class="btn btn-primary float-right" onclick="loadColumn()" href="#"><i class="iconfont"></i>柱状</a>
                        <a class="btn btn-primary float-right" onclick="loadPie()" href="#"><i class="iconfont"></i>饼图</a>
                        <a class="btn btn-primary float-right" onclick="loadLine()" href="#"><i class="iconfont"></i>折线</a>
                    </div>
                    <div class="table-box">
                        <table id="tb1" class="table">
                        </table>
                    </div>

                    <div id="container" style="height: 100%" class="page">

                    </div>
                </div>
            </main>
        </div>
    </main>
</div>
</body>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/echarts.min.js"></script>
<script type="text/javascript">

    function loadColumn() {
        clear();
        var myChart = echarts.init(document.getElementById('container'));
        // 显示标题，图例和空的坐标轴
        myChart.setOption({
            title: {
                text: '异步数据加载示例1'
            },
            tooltip: {},
            legend: {
                data: ['销量']
            },
            xAxis: {
                data: []
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: []
            }]
        });

        myChart.showLoading(); //数据加载完之前先显示一段简单的loading动画

        var names = []; //类别数组（实际用来盛放X轴坐标值）
        var nums = []; //销量数组（实际用来盛放Y坐标值）

        $.ajax({
            type: "get",
            async: true, //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
            url: "${pageContext.request.contextPath}/echarts/ColunmServlet", //
            data: {},
            dataType: "json", //返回数据形式为json
            success: function (result) {
                //请求成功时执行该函数内容，result即为服务器返回的json对象
                console.log(result);
                if (result) {
                    for (var i = 0; i < result.length; i++) {
                        names.push(result[i].name); //挨个取出类别并填入类别数组
                    }
                    for (var i = 0; i < result.length; i++) {
                        nums.push(result[i].value); //挨个取出销量并填入销量数组
                    }
                    myChart.hideLoading(); //隐藏加载动画
                    myChart.setOption({ //加载数据图表
                        xAxis: {
                            data: names
                        },
                        series: [{
                            // 根据名字对应到相应的系列
                            name: '销量',
                            data: nums,
                            //设置颜色
                            itemStyle: {
                                normal: {
                                    color: 'red',
                                }
                            }
                        }]
                    });

                }
            },
            error: function (errorMsg) {
                //请求失败时执行该函数
                alert("图表请求数据失败!");
                myChart.hideLoading();
            }
        });
    }


    function loadPie() {
        clear();
        //获得项目根目录
        var path = location.pathname;
        console.log(path);
        path = path.substr(0, path.substr(1).indexOf("/") + 1)


        var myChart = echarts.init(document.getElementById('container'));
        // 显示标题，图例和空的坐标轴
        myChart.setOption({
            color: ['red', 'yellow', 'orange', '#57a2fd', "#228b22"],//饼图颜色
            title: {
                text: '信息发布排行(异步请求)',
                subtext: '纯属虚构',
                x: 'center'
            },
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                orient: 'vertical',
                x: 'left',
                data: []
            },
            toolbox: {
                show: true,
                feature: {
                    mark: {
                        show: true
                    },
                    dataView: {
                        show: true,
                        readOnly: false
                    },
                    magicType: {
                        show: true,
                        type: ['pie', 'funnel'],
                        option: {
                            funnel: {
                                x: '25%',
                                width: '50%',
                                funnelAlign: 'left',
                                max: 1548
                            }
                        }
                    },
                    restore: {
                        show: true
                    },
                    saveAsImage: {
                        show: true
                    }
                }
            },
            series: [{
                name: '发布排行',
                type: 'pie',
                radius: '55%',
                center: ['50%', '60%'],
                data: []
            }]
        });

        myChart.showLoading(); //数据加载完之前先显示一段简单的loading动画

        var names = []; //类别数组（用于存放饼图的类别）
        var brower = [];
        $.ajax({
            type: "get",
            url: path + "/echarts/PieServlet",//请求数据的地址
            dataType: "json", //返回数据形式为json
            success: function (result) {
                console.log(result);
                //请求成功时执行该函数内容，result即为服务器返回的json对象
                $.each(result, function (index, item) {
                    console.log(item.name);
                    names.push(item.name);    //挨个取出类别并填入类别数组
                    brower.push({
                        name: item.name,
                        value: item.value
                    });
                });
                myChart.hideLoading(); //隐藏加载动画
                myChart.setOption({ //加载数据图表
                    legend: {
                        data: names
                    },
                    series: [{
                        data: brower
                    }]
                });
            },
            error: function (errorMsg) {
                //请求失败时执行该函数
                alert("图表请求数据失败!");
                myChart.hideLoading();
            }
        });
    }


    function loadLine() {
        clear();
        //获得项目根目录
        var path = location.pathname;
        path = path.substr(0, path.substr(1).indexOf("/") + 1)

        var myChart = echarts.init(document.getElementById('container'));
        // 显示标题，图例和空的坐标轴
        option = {
            title: {// 图表标题，可以通过show:true/false控制显示与否，还有subtext:'二级标题',link:'http://www.baidu.com'等
                text: '实例'
            },
            tooltip: {// 这个是鼠标浮动时的工具条，显示鼠标所在区域的数据，trigger这个地方每种图有不同的设置，见官网吧，一两句说不清楚
                trigger: 'axis'
            },
            legend: {// 这个就是图例，也就是每条折线或者项对应的示例，就是这个<a target=_blank href="http://img.blog.csdn.net/20160622094820180?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center">图例</a>
                data: []
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                    // 工具，提供几个按钮，例如动态图表转换，数据视图，保存为图片等
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',// 这几个属性可以控制图表上下左右的空白尺寸，可以自己试试。
                containLabel: true
            },
            xAxis: [{
                type: 'category',
                boundaryGap: false,
                data: []
                // X轴的定义
            }],
            yAxis: [{
                type: 'value'// Y轴的定义
            }],
            series: []
            // 这里就是数据了
        };

        myChart.showLoading(); //数据加载完之前先显示一段简单的loading动画

        $.ajax({
            url: path + "/echarts/LineServlet",
            type: 'get',
            dataType: 'json',
            success: function (jsons) {
                console.log(jsons);
                var Item = function () {
                    return {
                        name: '',
                        type: 'line',
                        label: {},
                        markLine: {
                            data: [{
                                type: 'average',
                                name: '平均值'
                            }]
                        },
                        data: []
                    };
                };// series中的每一项为一个item,所有的属性均可以在此处定义
                var legends = [];// 准备存放图例数据
                var Series = []; // 准备存放图表数据
                var json = jsons.data;// 后台返回的json
                console.log(json);
                for (var i = 0; i < json.length; i++) {
                    var it = new Item();
                    it.name = json[i].name;// 先将每一项填充数据
                    legends.push(json[i].name);// 将每一项的图例名称也放到图例的数组中
                    it.data = json[i].value;
                    Series.push(it);// 将item放在series中
                }
                option.xAxis[0].data = jsons.xcontent;// 这一步是设置X轴数据了，需要注意：option.xAxis.data = json.xcontent这样不行
                // 折线图可设置上下两个X轴，所以必须是option.xAxis[0].data = json.xcontent
                option.legend.data = legends;// 设置图例
                option.series = Series; // 设置图表
                myChart.setOption(option);// 重新加载图表
                myChart.hideLoading(); //隐藏加载动画
            },
            error: function () {
                alert("数据加载失败！请检查数据链接是否正确");
            }
        });
    }

    loadColumn();


    //清空样式
    function clear() {
        $("#container").html("");
        $("#container").attr("style", "height: 100%");
        $("#container").removeAttr("_echarts_instance_");
    }
</script>

</html>
